import { useState, useEffect, useRef } from 'react';
import { Layout, Table, Spin, message, Empty, Tabs, Button, Input, Tooltip } from 'antd';
import axios from 'axios';
import { API_BASE_URL } from '../config';
import { RightOutlined, DownOutlined, ReloadOutlined, FullscreenOutlined, EditOutlined, LeftOutlined } from '@ant-design/icons';
import { MdStorage } from 'react-icons/md';

// 导入资源图标
import resourceIcon from '../assets/资源图标.png';
import resourceGroupIcon from '../assets/资源组图标.png';

// 添加自定义CSS样式
const customStyles = `
  .horizontal-scroll-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
    display: block !important;  /* 确保容器以块元素方式显示 */
  }
  
  .horizontal-scroll-container::-webkit-scrollbar {
    height: 8px !important;
    width: 8px !important;
    background-color: #f1f1f1 !important;
    display: block !important; /* 强制显示滚动条 */
  }
  
  .horizontal-scroll-container::-webkit-scrollbar-thumb {
    background-color: #c1c1c1 !important;
    border-radius: 4px !important;
  }
  
  .horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8 !important;
  }
  
  /* 强制表格宽度，确保出现横向滚动条 */
  .ant-table-wrapper, .ant-table, .ant-table-container {
    min-width: 1500px !important;
  }
  
  /* 强制显示横向滚动条的类 */
  .show-scrollbar {
    overflow-x: scroll !important;
  }
  
  /* 确保在所有数据行数情况下都显示横向滚动条 */
  .horizontal-scroll-container[data-rows-count="many"] {
    overflow-x: scroll !important;
  }
  
  /* 设置纵向滚动条样式 */
  .ant-table-body {
    overflow-y: auto !important;
    max-height: calc(100vh - 250px) !important;
  }

  /* 设置纵向滚动条样式 */
  .ant-table-body {
    overflow-y: auto !important;
    max-height: calc(100vh - 250px) !important;
  }
  
  /* 正常行高 */
  .table-row-normal-height td {
    padding: 16px 8px;
  }
  
  /* 紧凑行高（当数据行数较多时使用） */
  .table-row-compact-height td {
    padding: 8px;
  }
  
  /* 紧凑表格样式 */
  .compact-table .ant-table-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  
  /* 调整图标大小 */
  .compact-table .ant-table-cell img {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* 调整字体大小 */
  .compact-table .ant-table-cell {
    font-size: 12px !important;
  }
  
  /* 美化表格边框和表头 */
  .ant-table {
    border: 1px solid #e8e8e8 !important;
  }
  
  .ant-table-thead > tr > th {
    background-color: #f7f7f7 !important;
    font-weight: bold !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  
  /* 定制分页样式 */
  .pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
  }
  
  /* 移动端响应式样式 */
  @media screen and (max-width: 576px) {
    .horizontal-scroll-container .ant-table-wrapper, 
    .horizontal-scroll-container .ant-table, 
    .horizontal-scroll-container .ant-table-container {
      min-width: 800px !important;
    }
    
    .ant-table-cell {
      padding: 4px !important;
      font-size: 12px !important;
    }
    
    .pagination-container {
      flex-direction: column;
      padding: 8px;
    }
    
    .pagination-tools {
      margin-top: 5px;
    }
  }
`;

const { Content } = Layout;

const ResourceLibrary = () => {
  // 添加表格容器引用
  const tableContainerRef = useRef(null);
  const inputRef = useRef(null);

  const [loading, setLoading] = useState(false);
  const [treeData, setTreeData] = useState([]);
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [resourceList, setResourceList] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [showingResources, setShowingResources] = useState(false);
  const [hasSelectedCategory, setHasSelectedCategory] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const [activeTab, setActiveTab] = useState('categoryDetail'); // 添加选项卡状态
  const [categoryDetail, setCategoryDetail] = useState(null); // 添加分类详情状态
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0
  });

  // 检测是否为移动设备
  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 576);
    };
    
    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    
    return () => {
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []);

  // 获取资源分类树
  const fetchCategoryTree = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`${API_BASE_URL}/api/resource_category/tree`);
      if (response.data && response.data.code === 200) {
        const items = response.data.data.items || [];
        setTreeData(items);
        
        // 默认展开所有节点
        const allKeys = getAllKeys(items);
        setExpandedKeys(allKeys);
      } else {
        message.error('获取资源分类树失败: ' + (response.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取资源分类树错误:', error);
      message.error('获取资源分类树失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };

  // 递归获取所有节点的key，用于默认展开
  const getAllKeys = (data) => {
    let keys = [];
    data.forEach(item => {
      keys.push(item.id);
      if (item.children && item.children.length > 0) {
        keys = [...keys, ...getAllKeys(item.children)];
      }
    });
    return keys;
  };

  // 获取分类下的资源列表
  const fetchResourcesByCategory = async (categoryId, page = 1, size = 10, includeSubcategories = false) => {
    if (!categoryId) return;
    
    setLoading(true);
    try {
      const params = {
        page,
        size,
        include_subcategories: includeSubcategories
      };
      
      const response = await axios.get(`${API_BASE_URL}/api/resource_info/by_category/${categoryId}`, {
        params
      });
      
      if (response.data && response.data.code === 200) {
        const items = response.data.data.items || [];
        
        // 处理返回的数据，确保所有必要字段都存在
        const processedItems = items.map(item => ({
          ...item,
          key: item.id,
          name: item.name || '未命名',
          code: item.code || '-',
          create_time: item.create_time || null,
          description: item.description || ''
        }));
        
        console.log('资源列表数据:', processedItems);
        
        setResourceList(processedItems);
        setPagination({
          ...pagination,
          current: page,
          pageSize: size,
          total: response.data.data.total || 0
        });
        setCurrentPage(page);
        
        // 设置为显示资源列表
        setShowingResources(true);
        setHasSelectedCategory(true);
      } else {
        message.error('获取资源列表失败: ' + (response.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取资源列表错误:', error);
      message.error('获取资源列表失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };

  // 获取资源分类详情
  const fetchCategoryDetail = async (categoryId) => {
    if (!categoryId) return;
    
    setLoading(true);
    try {
      const response = await axios.get(`${API_BASE_URL}/api/resource_category/${categoryId}`);
      
      if (response.data && response.data.code === 200) {
        setCategoryDetail(response.data.data);
        setActiveTab('categoryDetail');  // 默认显示分类详情tab
        setHasSelectedCategory(true);
      } else {
        message.error('获取分类详情失败: ' + (response.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取分类详情错误:', error);
      message.error('获取分类详情失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };

  // 处理节点点击展开/折叠
  const handleToggle = (id) => {
    if (expandedKeys.includes(id)) {
      setExpandedKeys(expandedKeys.filter(key => key !== id));
    } else {
      setExpandedKeys([...expandedKeys, id]);
    }
  };

  // 处理节点选择
  const handleSelect = (id) => {
    setSelectedCategory(id);
    fetchCategoryDetail(id);  // 获取分类详情
    // 将在选项卡切换时获取资源列表
  };

  // 渲染树节点
  const renderTreeNodes = (data, level = 0) => {
    return data.map(item => {
      const isExpanded = expandedKeys.includes(item.id);
      const hasChildren = item.children && item.children.length > 0;
      
      // 计算缩进
      const indentStyle = { marginLeft: level * 24 + 'px' };
      
      return (
        <div key={item.id} className="custom-tree-node">
          <div 
            className="node-content" 
            style={{
              ...indentStyle,
              display: 'flex',
              alignItems: 'center',
              padding: '8px 0',
              cursor: 'pointer',
              whiteSpace: 'nowrap'
            }}
            onClick={() => handleSelect(item.id)}
          >
            {hasChildren ? (
              <span 
                className="tree-switcher"
                onClick={(e) => {
                  e.stopPropagation();
                  handleToggle(item.id);
                }}
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '16px',
                  height: '16px'
                }}
              >
                {isExpanded ? 
                  <DownOutlined style={{ color: '#1766a3', fontSize: '12px' }} /> : 
                  <RightOutlined style={{ color: '#1766a3', fontSize: '12px' }} />
                }
              </span>
            ) : (
              <span style={{ width: '16px', display: 'inline-block' }}></span>
            )}
            <MdStorage style={{ color: '#1766a3', margin: '0 8px', fontSize: '16px', flexShrink: 0 }} />
            <span style={{ whiteSpace: 'nowrap' }}>{item.name}</span>
          </div>
          
          {hasChildren && isExpanded && (
            <div className="tree-children">
              {renderTreeNodes(item.children, level + 1)}
            </div>
          )}
        </div>
      );
    });
  };

  // 处理表格分页变化
  const handleTableChange = (pagination, filters, sorter) => {
    fetchResourcesByCategory(selectedCategory, pagination.current, pagination.pageSize);
  };

  // 更新翻页处理函数
  const handlePageChange = (page) => {
    setCurrentPage(page);
    fetchResourcesByCategory(selectedCategory, page, pageSize);
  };

  // 处理页码输入
  const handlePageInputChange = (e) => {
    const value = parseInt(e.target.value, 10);
    if (!isNaN(value) && value > 0 && value <= Math.ceil(pagination.total / pageSize)) {
      setCurrentPage(value);
    }
  };

  // 处理页码输入框按键事件
  const handlePageInputKeyPress = (e) => {
    if (e.key === 'Enter') {
      const value = parseInt(e.target.value, 10);
      if (!isNaN(value) && value > 0 && value <= Math.ceil(pagination.total / pageSize)) {
        setCurrentPage(value);
        fetchResourcesByCategory(selectedCategory, value, pageSize);
      }
    }
  };

  // 前一页
  const goPrevPage = () => {
    if (currentPage > 1) {
      const newPage = currentPage - 1;
      setCurrentPage(newPage);
      fetchResourcesByCategory(selectedCategory, newPage, pageSize);
    }
  };

  // 后一页
  const goNextPage = () => {
    if (currentPage < Math.ceil(pagination.total / pageSize)) {
      const newPage = currentPage + 1;
      setCurrentPage(newPage);
      fetchResourcesByCategory(selectedCategory, newPage, pageSize);
    }
  };

  // 动态定义表格列以适应移动设备
  const getTableColumns = () => {
    const baseColumns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align: 'left',
        ellipsis: true,
        render: (text, record) => {
          // 根据资源类型选择不同的图标
          let useResourceGroupIcon = record.source_type === '自制';
          
          return (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              <img 
                src={useResourceGroupIcon ? resourceGroupIcon : resourceIcon} 
                alt="资源图标" 
                style={{ 
                  width: isMobile ? '12px' : '16px', 
                  height: isMobile ? '12px' : '16px', 
                  marginRight: isMobile ? '4px' : '8px',
                  verticalAlign: 'middle'
                }} 
              />
              <span>{text}</span>
            </span>
          );
        }
      },
      {
        title: '编码',
        dataIndex: 'code',
        key: 'code',
        align: 'center',
        ellipsis: true,
        render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
      }
    ];
    
    // 移动端只显示核心列
    if (isMobile) {
      return [
        ...baseColumns,
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'center',
          ellipsis: true,
          render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
        }
      ];
    }
    
    // 桌面端显示完整列
    return [
      ...baseColumns,
      {
        title: '资源分类',
        dataIndex: 'category_name',
        key: 'category_name',
        align: 'center',
        ellipsis: true,
        render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
      },
      {
        title: '型号',
        dataIndex: 'model',
        key: 'model',
        align: 'center',
        ellipsis: true,
        render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
      },
      {
        title: '资源类型',
        dataIndex: 'resource_type',
        key: 'resource_type',
        align: 'center',
        ellipsis: true,
        render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
      },
      {
        title: '采购方式',
        dataIndex: 'source_type',
        key: 'source_type',
        align: 'center',
        ellipsis: true,
        render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        ellipsis: true,
        render: (text) => <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>
      },
      {
        title: '说明',
        dataIndex: 'description',
        key: 'description',
        align: 'left',
        ellipsis: true,
        render: (text) => (
          <div style={{
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            width: '100%',
            paddingRight: '8px'
          }}>
            {text || '-'}
          </div>
        )
      },
      {
        title: '创建日期',
        dataIndex: 'create_time',
        key: 'create_time',
        align: 'center',
        ellipsis: true,
        render: (text) => {
          if (!text) return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>-</span>;
          try {
            const date = new Date(text);
            if (!isNaN(date.getTime())) {
              return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>
                {date.toLocaleString('zh-CN', {
                  year: 'numeric',
                  month: '2-digit',
                  day: '2-digit',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit',
                  hour12: false
                }).replace(/\//g, '-')}
              </span>;
            }
            return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text}</span>;
          } catch (error) {
            console.error('日期格式化错误:', error);
            return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>;
          }
        }
      },
      {
        title: '更新日期',
        dataIndex: 'update_time',
        key: 'update_time',
        align: 'center',
        ellipsis: true,
        render: (text) => {
          if (!text) return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>-</span>;
          try {
            const date = new Date(text);
            if (!isNaN(date.getTime())) {
              return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>
                {date.toLocaleString('zh-CN', {
                  year: 'numeric',
                  month: '2-digit',
                  day: '2-digit',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit',
                  hour12: false
                }).replace(/\//g, '-')}
              </span>;
            }
            return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text}</span>;
          } catch (error) {
            console.error('日期格式化错误:', error);
            return <span style={{ display: 'block', width: '100%', textAlign: 'center' }}>{text || '-'}</span>;
          }
        }
      }
    ];
  };

  // 根据数据行数动态计算行高的类名
  const getRowClassName = () => {
    // 当数据达到10行或更多时使用紧凑行高
    if (resourceList.length >= 10 || isMobile) {
      return "table-row-compact-height";
    }
    return "table-row-normal-height";
  };

  // 组件挂载时加载数据
  useEffect(() => {
    fetchCategoryTree();
  }, []);

  // 处理选项卡切换
  const handleTabChange = (activeKey) => {
    setActiveTab(activeKey);
    if (activeKey === 'resourceList' && selectedCategory) {
      fetchResourcesByCategory(selectedCategory, 1, pageSize);
    }
  };

  // 自定义分页样式
  const customPaginationStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '16px',
    borderTop: '1px solid #e8e8e8',
    background: '#fff'
  };

  return (
    <Layout className={`resource-library-container ${isMobile ? 'mobile-layout' : ''}`}>
      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
      <Content style={{ padding: '0', height: '100%' }}>
        <div style={{ 
          display: 'flex', 
          height: '100%',
          flexDirection: isMobile ? 'column' : 'row' 
        }}>
          {/* 左侧分类树 */}
          <div style={{ 
            width: isMobile ? '100%' : '260px', 
            minWidth: isMobile ? '100%' : '260px',
            flexShrink: 0,
            height: isMobile ? 'auto' : '100%', 
            maxHeight: isMobile ? '200px' : 'none',
            padding: isMobile ? '8px' : '16px', 
            borderRight: isMobile ? 'none' : '1px solid #e8e8e8',
            borderBottom: isMobile ? '1px solid #e8e8e8' : 'none',
            background: '#fff',
            overflowY: 'hidden',
            overflowX: 'auto'
          }}>
            <div style={{ 
              marginBottom: isMobile ? '8px' : '16px', 
              fontWeight: 'bold', 
              fontSize: isMobile ? '14px' : '16px', 
              color: '#1766a3',
              display: 'flex',
              alignItems: 'center'
            }}>
              <MdStorage style={{ 
                fontSize: isMobile ? '14px' : '18px', 
                marginRight: isMobile ? '4px' : '8px', 
                color: '#1766a3' 
              }} />
              <span>资源分类</span>
            </div>
            <Spin spinning={loading}>
              <div className="custom-tree" style={{
                maxHeight: isMobile ? '150px' : 'calc(100vh - 190px)',
              }}>
                {treeData.length > 0 ? (
                  renderTreeNodes(treeData)
                ) : (
                  <div className="empty-tree">暂无分类数据</div>
                )}
              </div>
            </Spin>
          </div>
          
          {/* 右侧内容区域 - 资源列表 */}
          <div style={{ 
            flex: '1 1 auto', 
            minWidth: 0,
            display: 'flex', 
            flexDirection: 'column', 
            height: isMobile ? 'calc(100vh - 290px)' : '100%' 
          }}>
            {/* 调整表格容器样式，添加横向滚动 */}
            <div style={{ 
              flex: 1, 
              padding: isMobile ? '8px' : '16px', 
              paddingBottom: 0,
              display: 'flex',
              flexDirection: 'column',
              height: isMobile ? 'calc(100vh - 350px)' : 'calc(100vh - 100px)',
              overflow: 'hidden'
            }}>
              <Spin spinning={loading}>
                {hasSelectedCategory ? (
                  // 已选择分类，显示选项卡
                  <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    flex: 1,
                    border: '1px solid #e8e8e8',
                    position: 'relative',
                    overflow: 'hidden'
                  }}>
                    {/* 选项卡导航 */}
                    <div style={{
                      display: 'flex',
                      borderBottom: '1px solid #e8e8e8',
                      background: '#fff',
                      padding: '0 16px'
                    }}>
                      <div style={{
                        display: 'flex',
                        flex: 1
                      }}>
                        <div 
                          onClick={() => handleTabChange('categoryDetail')} 
                          style={{ 
                            padding: '12px 16px',
                            cursor: 'pointer',
                            position: 'relative',
                            color: activeTab === 'categoryDetail' ? '#1766a3' : 'inherit',
                            fontWeight: activeTab === 'categoryDetail' ? 'bold' : 'normal'
                          }}
                        >
                          分类详情
                          {activeTab === 'categoryDetail' && (
                            <div style={{
                              position: 'absolute',
                              bottom: 0,
                              left: 0,
                              right: 0,
                              height: '2px',
                              background: '#1766a3'
                            }}></div>
                          )}
                        </div>
                        <div 
                          onClick={() => handleTabChange('resourceList')} 
                          style={{ 
                            padding: '12px 16px',
                            cursor: 'pointer',
                            position: 'relative',
                            color: activeTab === 'resourceList' ? '#1766a3' : 'inherit',
                            fontWeight: activeTab === 'resourceList' ? 'bold' : 'normal'
                          }}
                        >
                          资源列表
                          {activeTab === 'resourceList' && (
                            <div style={{
                              position: 'absolute',
                              bottom: 0,
                              left: 0,
                              right: 0,
                              height: '2px',
                              background: '#1766a3'
                            }}></div>
                          )}
                        </div>
                      </div>
                      <div style={{
                        display: 'flex',
                        alignItems: 'center'
                      }}>
                        {activeTab === 'resourceList' && (
                          <>
                            <Button 
                              type="text" 
                              icon={<ReloadOutlined />} 
                              size="small"
                              title="刷新"
                            />
                            <Button 
                              type="text" 
                              icon={<FullscreenOutlined />} 
                              size="small"
                              title="最大化"
                            />
                          </>
                        )}
                        <Button 
                          type="text" 
                          icon={<EditOutlined />} 
                          size="small"
                          title="编辑"
                        />
                      </div>
                    </div>
                    
                    {/* 选项卡内容 */}
                    {activeTab === 'categoryDetail' ? (
                      // 分类详情内容
                      <div style={{ padding: '16px', background: '#fff' }}>
                        {categoryDetail && (
                          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '16px', alignItems: 'center' }}>
                            <div style={{ fontWeight: 'bold', textAlign: 'right' }}>编码:</div>
                            <div>{categoryDetail.code || '-'}</div>
                            
                            <div style={{ fontWeight: 'bold', textAlign: 'right' }}>标题:</div>
                            <div>{categoryDetail.name || '-'}</div>
                            
                            <div style={{ fontWeight: 'bold', textAlign: 'right' }}>资源类型:</div>
                            <div>{categoryDetail.resource_type || '-'}</div>
                            
                            <div style={{ fontWeight: 'bold', textAlign: 'right' }}>说明:</div>
                            <div>{categoryDetail.description || '-'}</div>
                            
                            <div style={{ fontWeight: 'bold', textAlign: 'right' }}>创建时间:</div>
                            <div>{categoryDetail.create_time ? new Date(categoryDetail.create_time).toLocaleString('zh-CN') : '-'}</div>
                            
                            <div style={{ fontWeight: 'bold', textAlign: 'right' }}>更新时间:</div>
                            <div>{categoryDetail.update_time ? new Date(categoryDetail.update_time).toLocaleString('zh-CN') : '-'}</div>
                          </div>
                        )}
                      </div>
                    ) : (
                      // 资源列表内容
                      <div style={{
                        display: 'flex',
                        flexDirection: 'column',
                        flex: 1,
                        overflow: 'hidden'
                      }}>
                        <div 
                          ref={tableContainerRef}
                          className="horizontal-scroll-container"
                          data-rows-count={resourceList.length > 10 ? "many" : "few"}
                          style={{
                            width: '100%',
                            flex: 1,
                            overflow: 'auto',
                            overflowY: 'auto',
                            display: 'block',
                            whiteSpace: 'nowrap',
                            position: 'relative',
                          }}
                        >
                          <div style={{ 
                            minWidth: isMobile ? '800px' : 'auto', 
                            width: isMobile ? '800px' : '100%', 
                            position: 'relative',
                            overflowY: 'visible'
                          }}>
                            <Table
                              className={`data-table ${resourceList.length >= 10 || isMobile ? 'compact-table' : ''}`}
                              columns={getTableColumns()}
                              dataSource={resourceList}
                              rowKey="id"
                              pagination={false}
                              onChange={handleTableChange}
                              size="small"
                              bordered={true}
                              scroll={{ x: resourceList.length > 0 ? (isMobile ? 800 : 'max-content') : undefined }}
                              tableLayout="auto"
                              rowClassName={getRowClassName}
                            />
                          </div>
                        </div>
                        
                        {/* 修改分页区域，参考FeatureDefinition.jsx */}
                        <div style={customPaginationStyle} className="pagination-container">
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span>共 {pagination.total} 条，{Math.ceil(pagination.total / pageSize)} 页</span>
                          </div>
                          
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Button 
                              icon={<LeftOutlined />}
                              onClick={goPrevPage}
                              disabled={currentPage === 1}
                              style={{ marginRight: '8px' }}
                            />
                            
                            <Input
                              ref={inputRef}
                              style={{ width: '50px', textAlign: 'center', margin: '0 8px' }}
                              value={currentPage}
                              onChange={handlePageInputChange}
                              onKeyPress={handlePageInputKeyPress}
                            />
                            
                            <span style={{ margin: '0 8px' }}>/ {Math.ceil(pagination.total / pageSize)}</span>
                            
                            <Button 
                              icon={<RightOutlined />}
                              onClick={goNextPage}
                              disabled={currentPage >= Math.ceil(pagination.total / pageSize)}
                              style={{ marginLeft: '8px', marginRight: '8px' }}
                            />
                            
                            <span style={{ marginLeft: '8px' }}>
                              {pageSize} / page
                            </span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                ) : (
                  // 未选择分类，显示提示信息
                  <div className="table-container" style={{
                    border: '1px solid #e8e8e8',
                    position: 'relative',
                    width: '100%',
                    flex: 1,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    background: '#fff'
                  }}>
                    <Empty
                      image={Empty.PRESENTED_IMAGE_SIMPLE}
                      description={
                        <span style={{ fontSize: isMobile ? '14px' : '16px', color: '#999' }}>
                          请点击{isMobile ? '上方' : '左侧'}资源分类查看对应资源列表
                        </span>
                      }
                    />
                  </div>
                )}
              </Spin>
            </div>
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default ResourceLibrary; 